<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 绘制一个七巧板 -->
    <canvas id="canvas" width="1024" height="700" style="border: 1px solid #999;display:block;margin: 0 auto;">
        当前浏览器不支持Canvas
    </canvas>
    <script>
        // 横着是x 纵着是y
        window.onload = function() {
            const canvas = document.getElementById('canvas');
            let context = canvas.getContext('2d');
            let pieces = [
                {
                    p: [
                        [100,100],
                        [100,300],
                        [300,100],
                        [100,100],
                    ],
                    color: "#3498db"
                },
                {
                    p: [
                        [100,300],
                        [100,400],
                        [400,400],
                        [400,300],
                        [100,300],
                    ],
                    color: "#1abc9c"
                },
                {
                    p: [
                        [100,300],
                        [300,300],
                        [200,200],
                        [100,300],
                    ],
                    color: "#8e44ad"
                },
                {
                    p: [
                        [300,300],
                        [200,200],
                        [300,100],
                        [300,300],
                    ],
                    color: "#e67e22"
                },
                {
                    p: [
                        [300,100],
                        [300,300],
                        [400,300],
                        [400,100],
                        [300,100],
                    ],
                    color: "#f1c40f"
                },
            ]

            pieces.forEach(v=>draw(v,context));
        }
        // 在ctx下画
        function draw(piece , ctx) {
            ctx.beginPath();
            ctx.moveTo(piece.p[0][0],piece.p[0][1]);
            for(let i=1;i<piece.p.length;i++) {
                ctx.lineTo(piece.p[i][0],piece.p[i][1]);
            }
            ctx.closePath();

            ctx.fillStyle = piece.color;
            ctx.fill();
        }
    </script>
</body>
</html>